<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#container{
				background-color: #CCCCCC;
				height: 600px;
				width: 500px;
				/* flex */
				display: flex;
				justify-content: space-evenly;
				align-items: center;
			}
			.item{
				background-color: yellow;
				width: 100px;
				height: 100px;
				
			}
			/* 单点 */
			.one{
				/* 对点使用flex布局 */
				display: flex;
				justify-content: center;
				align-items: center;
			}
			/* 点 */
			.item-one{
				display: block;
				height: 20px;
				width: 20px;
				background-color: #1890FF;
				border-radius: 50%;
			}
			/* 三点 */
			.two{
				
				display: flex;
				justify-content: space-between;
			}
			.two span{
				margin: 2px;
				display: block;
				height: 20px;
				width: 20px;
				border-radius: 50%;
				background-color: #1890FF;
			}
			.two2{
				align-self: center;
			}
			.two3{
				align-self: flex-end;
			}
			/* 五点 */
			.three{
				display: flex;
				justify-content: space-around;
			}
			.three span{
				display: block;
				height: 20px;
				width: 20px;
				border-radius: 50%;
				background-color: #1890FF;
			}
			#three_one, #three_three{
				padding: 2px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			#three_two{
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
			/* 六点 */
			.four{
				display: flex;
				justify-content: space-around;
			}
			.four span{
				display: block;
				height: 20px;
				width: 20px;
				border-radius: 50%;
				background-color: #1890FF;
			}
			#four1,#four2{
				padding: 2px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<!-- 一个点居中 -->
			<div class="item one">
				<span class="item-one"></span>
			</div>
			<!-- 三点 -->
			<div class="item two">
				<span class="two1"></span>
				<span class="two2"></span>
				<span class="two3"></span>
			</div>
			<!-- 五点 -->
			<div class="item three">
				<div id="three_one">
					<span></span>
					<span></span>
				</div>
				<div id="three_two">
					<span></span>
				</div>
				<div id="three_three">
					<span></span>
					<span></span>
				</div>
			</div>
			<!-- 六点 -->
			<div class="item four">
				<div id="four1">
					<span></span>
					<span></span>
					<span></span>
				</div>
				<div id="four2">
					<span></span>
					<span></span>
					<span></span>
				</div>
			</div>
			
		</div>
	</body>
</html>
